<template>
  <div class="user-task-properties">
    <el-form label-position="top">
      <!-- 分配人 -->
      <el-form-item :label="t('bpmn.assignee')">
        <el-input
            v-model="localProperties.assignee"
            @input="updateProperties"
            :placeholder="t('bpmn.enterAssignee')"
        />
      </el-form-item>

      <!-- 候选用户 -->
      <el-form-item :label="t('bpmn.candidateUsers')">
        <el-select
            v-model="localProperties.candidateUsers"
            multiple
            filterable
            allow-create
            @change="updateProperties"
            :placeholder="t('bpmn.selectUsers')"
        >
          <el-option
              v-for="user in candidateUserOptions"
              :key="user.value"
              :label="user.label"
              :value="user.value"
          />
        </el-select>
      </el-form-item>

      <!-- 截止时间 -->
      <el-form-item :label="t('bpmn.dueDate')">
        <el-date-picker
            v-model="localProperties.dueDate"
            type="datetime"
            @change="updateProperties"
            :placeholder="t('bpmn.selectDueDate')"
        />
      </el-form-item>

      <!-- 优先级 -->
      <el-form-item :label="t('bpmn.priority')">
        <el-select
            v-model="localProperties.priority"
            @change="updateProperties"
            :placeholder="t('bpmn.selectPriority')"
        >
          <el-option
              v-for="priority in priorityOptions"
              :key="priority.value"
              :label="priority.label"
              :value="priority.value"
          />
        </el-select>
      </el-form-item>

      <!-- 应用按钮 -->
      <el-button
          type="primary"
          @click="updateProperties"
          class="apply-btn"
      >
        {{ t('bpmn.saveTaskSettings') }}
      </el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const props = defineProps({
  element: Object
});

const emit = defineEmits(['update']);

// 优先级选项
const priorityOptions = computed(() => [
  { label: t('bpmn.priorityHigh'), value: 'high' },
  { label: t('bpmn.priorityMedium'), value: 'medium' },
  { label: t('bpmn.priorityLow'), value: 'low' }
]);

// 候选用户选项
const candidateUserOptions = ref([
  { label: '张三', value: 'zhangsan' },
  { label: '李四', value: 'lisi' },
  { label: '王五', value: 'wangwu' }
]);

// 本地存储的属性副本
const localProperties = ref({
  assignee: '',
  candidateUsers: [],
  dueDate: null,
  priority: 'medium'
});

// 监听元素变化
watch(() => props.element, (newElement) => {
  if (newElement && newElement.businessObject) {
    const bo = newElement.businessObject;
    localProperties.value = {
      assignee: bo.assignee || '',
      candidateUsers: bo.candidateUsers ? bo.candidateUsers.split(',') : [],
      dueDate: bo.dueDate || null,
      priority: bo.priority || 'medium'
    };
  }
}, { immediate: true });

// 更新属性
function updateProperties() {
  emit('update', {
    businessObject: {
      assignee: localProperties.value.assignee,
      candidateUsers: localProperties.value.candidateUsers.join(','),
      dueDate: localProperties.value.dueDate,
      priority: localProperties.value.priority
    }
  });
}
</script>

<style scoped>
.user-task-properties {
  padding: 12px;
}
.apply-btn {
  margin-top: 16px;
  width: 100%;
}
</style>